<template>
<div>
    <if-header></if-header>
    <van-search
            v-model="value"
            shape="round"
            background="#fff"
            placeholder="输入关键字，查能不能做"
            />
    <p class="big">分类查询</p>
    <ul>
        <router-link v-for="(item, index) in list.cate" :key="index" class="info" :to="'/doSearch/'+item.cid">
            <div class="out">
                <img :src="item.image_url" alt="">
            </div>
            <p>{{item.title}}</p>
        </router-link>
    </ul>
    <p class="big">年龄查询</p>
    <ul>
        <router-link v-for="(item, index) in list.period" :key="index" class="botinfo" :to="'/ageSearch/'+item.pid">
            <img :src="item.image_url" alt="">
            <p>{{item.title}}</p>
        </router-link>
    </ul>
</div>
</template>

<script>
import Vue from 'vue';
import ifHeader from './header'
import { Search } from 'vant';
export default {
    data() {
        return {
            list:[],
            value : ''
        }
    },
    components: {
        'if-header' : ifHeader,
    },
    async mounted() {
        let result = await this.$http.get({
            url:'/content/Tools/Do.html',
            params:{
                pettype: 'dog',
                system: 'wap',
                isWeb: 1,
                version: 517,
                distinct_id: '1768548a12f68-06d1a541b973ac-c791039-1327104-1768548a1313ca',
                debug_param: ''
            }
        })
        this.list = result.data
        console.log(this.list);
    }
}
</script>

<style lang="stylus" scoped>
.big
    padding-left .15rem
    margin-bottom .1rem
    font-size .18rem
    font-weight 700
ul
    display flex
    flex-wrap wrap
    .info
        width 33%
        text-align center
        margin-bottom .2rem
        p
            margin-top .05rem
            color #666
            font-size .13rem
        .out
            border 1px solid #eee
            border-radius 50%
            margin 0 .16rem
            text-align center
            img 
                width .46rem
                height .46rem
                margin .19rem
                flex 1
                display inline-block
    .botinfo
        width 25%
        text-align center
        margin-bottom .2rem
        img 
            width .4rem
            height .4rem
            margin 0 .24rem
        p
            margin-top .05rem
            font-size .13rem
            color #666


</style>